<template>
  <view class="card padding-30">
    <text class="text-30 color-t1">车辆照片</text>

    <tui-upload
      v-if="status != 1 && status != 2"
      :value="photos"
      :icon-size="60"
      :row="4"
      :limit="6"
      width="146"
      height="146"
      dir="vehicle"
      margin="20rpx 15rpx 0 0"
      @chooseImage="chooseImage"
      @remove="removeImage"
    />

    <!-- <view v-else-if="status != 2" class="flex-row flex-wrap image-list">
		<view v-for="(item,index) in photos" :key="index" class="image-conten">
			<image :src="item" class="images block" mode="aspectFill" @click="previewImage(index)" />
		</view>
    </view> -->
  </view>
</template>

<script>
import { viewImage } from '@/common/util'
export default {
  name: 'BasicInfoModel',
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    status: {
      type: [Number, String],
      default: 0
    },
    carPic: {
      type: Array,
      default: () => []
    },
	photo:{
		type:String,
		default:()=>{}
	}
  },
  data() {
    return {
      photos: [],
      form: {
        photo: ''
      }
    }
  },
  watch: {
	  photo:{
		  handler(newVal){
			  if(newVal[0]){
				  this.photos = newVal.split(',')
			  }
		  },
		  immediate:true,
		  deep:true
	  },
    data: {
      handler(e) {
        Object.assign(this.form, e)
      },
      deep: true
    },
    form: {
      handler() {
        this.$emit('update', this.form)
      },
      deep: true
    },
    carPic: {
      handler() {
        this.photos = this.copyData(this.carPic)
      },
      deep: true
    }
  },
  methods: {
    removeImage(e) {
      this.photos.splice(e.index, 1)
      this.form.photo = this.photos.join(',')
    },
    chooseImage(e) {
      this.photos.push(...e)
      this.form.photo = this.photos.join(',')
    },
    previewImage(index) {
      if (!this.photos.length) return
      viewImage(index, this.photos, true)
    }
  }
}
</script>

<style scoped>
.image-list{
	margin-top: 20rpx;
}
.image-conten{
	width: 49%;
	height: 200rpx;
	border-radius: 10rpx;
	margin-bottom: 10rpx;
	overflow: hidden;
}
.image-conten:nth-child(odd){
	margin-right: 10rpx;
}
.images{
  width:100%;
  height:100%;
}
</style>
